<template>
	<view class="container">
		<navigator url="UserInfo" class="information" hover-class="none" open-type="navigate">
			<image mode="aspectFill" :src="avatar" class="avatar"></image>
			<text class="username">{{username}}</text>
			<text class="describe">{{describe}}</text>
		</navigator>

		<navigator url="/pages/Person/MyPicture" class="section">
			<view class="section-content">
				<image src="../../static/picture.png" mode="aspectFill" class="icon"></image>
				<text class="section-title">我的照片</text>
			</view>
		</navigator>

		<navigator url="/pages/Person/MyLike" class="section">
			<view class="section-content">
				<image src="../../static/like.png" mode="aspectFill" class="icon"></image>
				<text class="section-title">我的喜欢</text>
			</view>
		</navigator>

		<navigator url="/pages/Person/Interested" class="section">
			<view class="section-content">
				<image src="../../static/browser.png" mode="aspectFill" class="icon"></image>
				<text class="section-title">赞过你的</text>
			</view>
		</navigator>

		<navigator v-if="$global.personInfo.openid = manegeId" url="/pages/Person/Manage" class="section">
			<view class="section-content">
				<image src="../../static/manage.png" mode="aspectFill" class="icon"></image>
				<text class="section-title">活动管理</text>
			</view>
		</navigator>
	</view>
</template>

<script>
	import config from '../../common/config';
	export default {
		data() {
			return {
				manegeId: '111111',
				avatar: config.baseUrl + this.$global.personInfo.imgurl,
				username: this.$global.personInfo.username,
				describe: this.$global.personInfo.describe
			}
		},
		methods: {
			onLoad() {
				if (this.$global.personInfo.describe.length > 5) {
					this.describe = this.describe.substring(0, 5);
				}
				// this.openid = this.$global.personInfo.openid
				// let that = this
				// uni.request({
				// 	url: config.baseUrl + 'user/getUserInfo',
				// 	method: 'POST',
				// 	data: {
				// 		"openid": that.openid
				// 	},
				// 	success: (res) => {
				// 		// console.log(res);
				// 		if (res != null || res != 'undefined') {
				// 			that.$global.personInfo = res.data.data
				// 		}
				// 		// console.log(that.$global.personInfo);
				// 		if (that.describe.length > 5) {
				// 			that.describe = this.describe.substring(0, 5);
				// 		}
				// 	}
				// })
			},
		}
	};
</script>

<style>
	.describe {
		margin-left: 50rpx;
	}

	.container {
		padding: 30rpx;
		background: linear-gradient(to bottom, #FFDAB9, #FFF8DC);
		/* 从上往下变淡的橘色渐变 */
		background: linear-gradient(to right, #FFDAB9, #FFF8DC);
		/* 从左往右变淡的橘色渐变 */
		height: 82vh;
		/* 设置容器高度为100%视口高度 */
	}

	.information {
		display: flex;
		align-items: center;
		flex-direction: row;
		height: 200rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.username {
		font-size: 36rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.section {
		margin-top: 20rpx;
		padding: 20rpx 0;
		border-top: 1rpx solid #ccc;
	}

	.section-content {
		display: flex;
		align-items: center;
	}

	.icon {
		width: 80rpx;
		/* 设置图标宽度为80rpx */
		height: 80rpx;
		/* 设置图标高度为80rpx */
		border-radius: 10rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-left: 20rpx;
		/* 添加左边距 */
	}
</style>